﻿
@{
    ViewData["Title"] = "文章管理-文章列表-编辑文章";
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.CurrentMenuP = "Article";
    ViewBag.CurrentMenu = "ArticleNews/List";
}
@using Yuebon.WebApp.Commons;
<div class="edit-page-wrapper">
    <div class="row">
        <div class="col-12">
            <form class="form-horizontal" id="frmSubmit" method="post" enctype="multipart/form-data">
                <div class="card">
                    <div class="card-header d-flex p-0">
                        <ul class="nav nav-pills p-2">
                            <li class="nav-item">
                                <a class="nav-link active" href="#basicInfo" data-toggle="tab">基本信息</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#detailInfo" data-toggle="tab">详细描述</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#seoInfo" data-toggle="tab">SEO选项</a>
                            </li>
                        </ul>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content p-0">
                            <!-- Morris chart - Sales -->
                            <div class="chart tab-pane active" id="basicInfo" style="position: relative;">
                                <div class="form-group">
                                    <div class="row">
                                        <label for="CategoryId" class="col-form-label col-1">所属类别:</label>
                                        <select class="form-control select2  col-5" name="CategoryId" id="CategoryId">
                                            <option value="">==请选择类别==</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Title" class="col-form-label col-md-1">标题:</label>
                                        <input type="text" class="form-control col-md-5" name="Title" id="Title" placeholder="请输入标题">
                                        <span class="help-block">*标题最多100个字符</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="SubTitle" class="col-form-label col-md-1">副标题:</label>
                                        <input type="text" class="form-control col-md-5" name="SubTitle" id="SubTitle" placeholder="请输入副标题">
                                        <span class="help-block">可为空，最多255个字符</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="ImgUrl" class="col-form-label col-1">封面图片:</label>
                                        <div class="input-group col-5">
                                            <input type="text" class="form-control upload-path" name="ImgUrl" id="ImgUrl">
                                            <button type="button" id="j_upload_img_btn">选择图片</button>
                                            <ul id="upload_img_wrap"></ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="ImgUrlPic" class="col-form-label col-1"></label>
                                        <div class="input-group col-5">
                                            <img src="..." alt="" id="ImgUrlPic" class="img-rounded" width="100" height="100"/>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Tags" class="col-form-label col-1">Tag标签:</label>
                                        <input type="text" class="form-control col-5" name="Tags" id="Tags" placeholder="请输入标签">
                                        <span class="help-block">多个可用英文逗号分隔开，如：a,b</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-1"><label for="recipient-name" class="col-form-label">属性:</label></div>
                                        <div class="col-11">
                                            <label for="EnabledMark">
                                                <input type="checkbox" class="flat-red" checked="checked" name="EnabledMark" id="EnabledMark">
                                                是否发布
                                            </label>
                                            <label for="IsMsg">
                                                <input type="checkbox" class="flat-red" name="IsMsg" id="IsMsg">
                                                开启留言
                                            </label>
                                            <label for="IsTop">
                                                <input type="checkbox" class="flat-red" name="IsTop" id="IsTop">
                                                置顶
                                            </label>
                                            <label for="IsRed">
                                                <input type="checkbox" class="flat-red" name="IsRed" id="IsRed">
                                                推荐
                                            </label>
                                            <label for="IsHot">
                                                <input type="checkbox" class="flat-red" name="IsHot" id="IsHot">
                                                热门
                                            </label>
                                            <label for="IsSlide">
                                                <input type="checkbox" class="flat-red" name="IsSlide" id="IsSlide">
                                                幻灯
                                            </label>
                                            <label for="IsSys">
                                                <input type="checkbox" class="flat-red" name="IsSys" id="IsSys">
                                                系统
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="SortCode" class="col-form-label col-1">排序:</label>
                                        <input type="number" class="form-control col-5" name="SortCode" id="SortCode" value="99" min="0" placeholder="请输入排序号">
                                        <span class="help-block">*数字，越大越向前</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Click" class="col-form-label col-1">浏览器次数:</label>
                                        <input type="number" class="form-control col-5" name="Click" id="Click" value="0" min="0" placeholder="浏览器次数">
                                        <span class="help-block">点击浏览该信息自动+1</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="LikeCount" class="col-form-label col-1">点赞数:</label>
                                        <input type="number" class="form-control col-5" name="LikeCount" id="LikeCount" value="0" min="0" placeholder="点赞数">
                                        <span class="help-block">点击“赞”该信息自动+1</span>
                                    </div>
                                </div>
                            </div>
                            <div class="chart tab-pane" id="detailInfo" style="position: relative; ">
                                <div class="form-group">
                                    <div class="row">
                                        <label for="LinkUrl" class="col-form-label col-1">URL链接:</label>
                                        <input type="text" class="form-control col-5" name="LinkUrl" id="LinkUrl" placeholder="填写后直接跳转到该网址">
                                        <span class="help-block">填写后直接跳转到该网址</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Source" class="col-form-label col-1">来源:</label>
                                        <input type="text" class="form-control col-5" name="Source" id="Source" value="本站" placeholder="请输入来源">
                                        <span class="help-block">非必填，最多50个字符</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Author" class="col-form-label col-1">作者:</label>
                                        <input type="text" class="form-control col-5" name="Author" id="Author" value="@ViewData["RealName"]" placeholder="请输入作者">
                                        <span class="help-block">非必填，最多50个字符</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="Zhaiyao" class="col-form-label col-1">摘要:</label>
                                        <textarea class="form-control col-5" id="Zhaiyao" name="Zhaiyao"></textarea>
                                        <span class="help-block">非必填，最多120个字符</span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-1"><label for="recipient-name" class="col-form-label">描述:</label></div>
                                        <div class="col-11"> <textarea id="Description" name="Description"></textarea></div>
                                    </div>
                                </div>
                            </div>
                            <div class="chart tab-pane" id="seoInfo" style="position: relative; ">
                                <div class="form-group">
                                    <div class="row">
                                        <label for="SeoTitle" class="col-form-label col-1">SEO标题:</label>
                                        <input type="text" class="form-control col-11" name="SeoTitle" id="SeoTitle" placeholder="请输入SEO标题">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="SeoKeywords" class="col-form-label col-1">SEO关键词:</label>
                                        <input type="text" class="form-control col-11" name="SeoKeywords" id="SeoKeywords" placeholder="请输入SEO关键词">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <label for="SeoDescription" class="col-form-label col-1">SEO描述:</label>
                                        <input type="text" class="form-control col-11" name="SeoDescription" id="SeoDescription" placeholder="请输入SEO描述">
                                    </div>
                                </div>
                            </div>


                            <input type="hidden" id="Id" name="Id" value="@ViewData["Id"] " />
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary btnSave" id="btnSaveOK"><i class="fa fa-save"></i>保存</button>
                                <button type="button" class="btn btn-danger" data-dismiss="modal" id="btnSavefather"><i class="fa fa-close"></i>返回</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<textarea id="uploadEditor" style="display: none;"></textarea>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
    // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
    var uploadEditor = UE.getEditor("uploadEditor", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled: false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled: true,
        toolbars: [["insertimage", "attachment"]]
    });

    // 监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
    });
    // 自定义按钮绑定触发多图上传和上传附件对话框事件
    document.getElementById('j_upload_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };
    // 多图上传动作
    function _beforeInsertImage(t, result) {
        var imageHtml = '';
        $("#ImgUrl").val(result[0].src);
        $("#ImgUrlPic").attr("src", result[0].src);
        //for (var i in result) {
        //    imageHtml += '<li><img src="' + result[i].src + '" alt="' + result[i].alt + '" height="150"></li>';
        //}
        //document.getElementById('upload_img_wrap').innerHTML = imageHtml;
    }
</script>
<!-- page script -->
<script>
    $(function () {
        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].flat-red').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal',
        })
        // $("#myEditorImage").InitUploader({ sendurl: "/api/UEditor", swf: "~/lib/webuploader/uploader.swf" });

        InitDictItem();
        var ue = UE.getEditor('Description', {
            initialFrameHeight: 200
        });
        BindEditInfo();
        BindSaveEvent();
    });
    //初始化数据字典
    function InitDictItem() {
        $("#CategoryId").bindSelect({
            url: "/CMS/ArticleCategory/FindTreeSelectJson",
        });
    }
    //绑定编辑详细信息的方法
    function BindEditInfo() {
        var ID = $("#Id").val();
        if (ID.trim() != "") {
            //首先用户发送一个异步请求去后台实现方法
            $.getJSON("/CMS/ArticleNews/GetById?r=" + Math.random() + "&id=" + ID, function (info) {
                //赋值有几种方式：.datebox('setValue', info.Birthday);.combobox('setValue', info.Status);.val(info.Name);
                $("#Id").val(info.ResData.Id);
                $("#frmSubmit").formSerialize(info.ResData);
                UE.getEditor('Description').setContent(info.ResData.Description);
                $("#ImgUrlPic").attr("src", info.ResData.ImgUrl);
            });
        }
    }
    //绑定保存按钮的事件
    function BindSaveEvent() {
        $("#btnSaveOK").click(function () {
            $("#frmSubmit").validate({
                rules: {
                    Title: {
                        required: true,
                        minlength: 2
                    },
                },
                messages: {
                    Title: {
                        required: "请输入分类名称",
                        minlength: "分类名称至少2个字符"
                    },
                },
                errorClass: 'help-block help-block-error',
                focusInvalid: true,
                //unhighlight: function (element, errorClass, validClass) { //验证通过
                //    $(element).tooltip('destroy').removeClass(errorClass);
                //},
                highlight: function (element) {//验证未通过
                    $(element).closest('.form-group').addClass('has-error');
                },
                success: function (label, element) {
                    $(element).closest('.form-group').removeClass('has-error');
                    //label.remove();
                    $(element).attr("title", "").tooltip("hide");
                    //alert(element);
                },
                errorPlacement: function (error, element) {
                    //element.parent('div').append(error);
                    if ($(element).next("div").hasClass("tooltip")) {
                        $(element).attr("data-original-title", $(error).text()).tooltip("show");
                    } else {
                        $(element).attr("title", $(error).text()).tooltip("show");
                    }
                },
                submitHandler: function (form) {
                    var postData = {
                        "Id": $("#Id").val(),
                        "Title": $("#Title").val(),
                        "SubTitle": $("#SubTitle").val(),
                        "CategoryId": $("#CategoryId").val(),
                        "Tags": $("#Tags").val(),
                        "ImgUrl": $("#ImgUrl").val(),
                        "LinkUrl": $("#LinkUrl").val(),
                        "SeoTitle": $("#SeoTitle").val(),
                        "SeoKeywords": $("#SeoKeywords").val(),
                        "SeoDescription": $("#SeoDescription").val(),
                        "SortCode": $("#SortCode").val(),
                        "EnabledMark": $("#EnabledMark").is(':checked'),
                        "IsMsg": $("#IsMsg").is(':checked'),
                        "IsTop": $("#IsTop").is(':checked'),
                        "IsRed": $("#IsRed").is(':checked'),
                        "IsHot": $("#IsHot").is(':checked'),
                        "IsSlide": $("#IsSlide").is(':checked'),
                        "IsSys": $("#IsSys").is(':checked'),
                        "Click": $("#Click").val(),
                        "LikeCount": $("#LikeCount").val(),
                        "Source": $("#Source").val(),
                        "Author": $("#Author").val(),
                        "Zhaiyao": $("#Zhaiyao").val(),
                        "Description": UE.getEditor('Description').getContent()
                    };
                    var keyValue = $("#Id").val().trim();
                    var reqUrl = "/CMS/ArticleNews/Insert";
                    if (keyValue != "" && keyValue != null && keyValue != "null") {
                        reqUrl = "/CMS/ArticleNews/Update?id=" + keyValue;
                    }
                    $.ajax({
                        url: reqUrl,
                        data: postData,
                        dataType: 'json',//服务器返回json格式数据
                        type: 'post',//HTTP请求类型
                        timeout: 100000,//超时时间设置为10秒；
                        success: function (data) {
                            //服务器返回响应，根据响应结果，分析是否登录成功；
                            if (data.Success) {
                                $("#frmSubmit")[0].reset();
                                toastr.success("操作成功");
                                setTimeout(function () {
                                    window.location.href = "/CMS/ArticleNews/Index"
                                }, 1500);
                            } else {
                                toastr.warning("操作失败：" + data.ErrMsg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            toastr.warning("操作失败：" + errorThrown);
                        }
                    });
                }
            });
        });

        $("#btnSavefather").click(function () {
            window.location = "/Security/MemberGrades/Index";
        });
    }

</script>
